﻿window.onload = function () {
    //定时器
    clearInterval(timer);
    var timer = setInterval(get_pre, 3000);
    //创建数组
    //图片
    var sz = new Array();
    //a链接
    var sza = new Array();
    //获取ul元素
    var cur_ul = document.getElementById("banner");
    //添加子节点
    for (var i = 6; i <= 10; i++) {
        //创建子节点
        var cur_li = document.createElement("li");
        var cur_a = document.createElement("a");
        var cur_img = document.createElement("img");
        //插入图片设置样式
        cur_img.src = "../Player图片/轮播图/商城轮播图/" + i + ".png";
        cur_img.style.width = "350px";
        cur_img.style.height = "180px";
        cur_a.href = "SCwegm1.aspx";
        //为li绑定移入移出事件
        cur_li.onmousemove = function () {
            clearInterval(timer);
        }
        cur_li.onmouseout = function () {
            clearInterval(timer);
            timer = setInterval(get_pre, 3000);
        }
        //添加对应子节点
        cur_a.appendChild(cur_img);
        cur_li.appendChild(cur_a);
        cur_ul.appendChild(cur_li);
        //录入数组
        sz.push(cur_li);
        sza.push(cur_a);
        sz[sz.length - 1].style = "0px";
    }
    //轮播图设置超链接
    sza[0].href = "SCwegm1.aspx?id=1";
    sza[1].href = "SCwegm1.aspx?id=18";
    sza[2].href = "SCwegm1.aspx?id=30";
    sza[3].href = "SCwegm1.aspx?id=37";
    sza[4].href = "SCwegm1.aspx?id=15";

    //设置前后箭头
    //向前
    var pre_img = document.createElement("img");
    pre_img.src = "../Player图片/轮播图/商城轮播图/箭头.png";
    pre_img.style.width = "40px";
    pre_img.style.height = "45px";
    pre_img.style.position = "absolute";
    pre_img.style.left = 0;
    pre_img.style.top = 0;
    pre_img.style.bottom = 0;
    pre_img.style.margin = "auto";
    pre_img.style.zIndex = 90;
    cur_ul.appendChild(pre_img);
    //向后
    var nex_img = document.createElement("img");
    nex_img.src = "../Player图片/轮播图/商城轮播图/箭头2.png";
    nex_img.style.width = "40px";
    nex_img.style.height = "45px";
    nex_img.style.position = "absolute";
    nex_img.style.right = 0;
    nex_img.style.top = 0;
    nex_img.style.bottom = 0;
    nex_img.style.margin = "auto";
    nex_img.style.zIndex = 90;
    cur_ul.appendChild(nex_img);

    //向前箭头点击
    pre_img.onclick = function () {
        clearInterval(timer);
        get_next();
        timer = setInterval(get_pre, 3000);
    }
    //向后箭头点击
    nex_img.onclick = function () {
        clearInterval(timer);
        get_pre();
        timer = setInterval(get_pre, 3000);
    }


    //显示后三张
    var len = sz.length - 1;
    sz[len - 2].style.left = "0px";
    sz[len - 1].style.zIndex = 90;
    sz[len - 1].style.left = "220px";
    sz[len - 1].style.transform = "scale(1.3)";
    sz[len].style.left = "450px";

    //上一张图
    function get_pre() {
        //将第一个元素放到最后
        var give_up = sz[0];
        sz.shift();
        sz.push(give_up);
        //数组初始化
        for (var i = 0; i < sz.length; i++) {
            sz[i].style.zIndex = i;
            sz[i].style.transform = "scale(1)";
        }
        sz[len - 2].style.left = "0px";
        sz[len - 1].style.zIndex = 90;
        sz[len - 1].style.left = "220px";
        sz[len - 1].style.transform = "scale(1.3)";
        sz[len - 1].style.opacity = 1;
        sz[len].style.left = "450px";
    }

    //下一张图
    function get_next() {
        //将最后一个元素放到第一个
        var give_up = sz[len];
        sz.pop();
        sz.unshift(give_up);
        //数组初始化
        for (var i = 0; i < sz.length; i++) {
            sz[i].style.zIndex = i;
            sz[i].style.transform = "scale(1)";
        }
        sz[len - 2].style.left = "0px";
        sz[len - 1].style.zIndex = 90;
        sz[len - 1].style.left = "220px";
        sz[len - 1].style.transform = "scale(1.3)";
        sz[len - 1].style.opacity = 1;
        sz[len].style.left = "450px";
    }

}